<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>业绩明细</title>
<script type="text/javascript">
$("#target").on("change", function() {
	var val = $(this).val();
	if(!val)
		return;
	var num =  /^\d*$/;
	if(!num.test(val)){
		Comm.msg("请输入整数");
	}
	$.ajax({
		type : 'POST',
        url: "${ctx}/weixin/employee/changeTarget",
        dataType: "json",
        data:"target="+val,
        success: function (data) {
            if (data.success) {
            	var amount = $("#monthAmount").val();
            	var progress = parseInt(parseFloat(amount)/parseFloat(val)*100)+"%";
            	$(".am-progress-bar").css("width",progress);
            	$(".progress-span").text("已完成"+progress);
            }else{
            	Comm.msg("修改本月目标失败");
            }
        },
        error: function () {
        	Comm.msg("网络连接失败，请稍后重试");
        }
    });
});
</script>
</head>
<body>
	<h4 class="app-title-secondary">今日</h4>
	<ul class="am-list am-list-static am-padding-left-sm am-margin-0 am-text-sm">
		<li><ul class="am-avg-sm-2"><li>今日业绩：${perforMap.dayAmount}元</li><li class="am-text-right am-padding-right-sm"><a href="weixin/employee/performanceDetail?dayType=day&type=base">明细</a></li></ul></li>
		<li><ul class="am-avg-sm-2"><li>今日提成：${perforMap.dayCommisionAmount}元</li><li class="am-text-right am-padding-right-sm"><a href="weixin/employee/performanceDetail?dayType=day&type=commision">明细</a></li></ul></li>
	</ul>
	<h4 class="app-title-secondary">本月</h4>
	<ul class="am-list am-list-static am-padding-left-sm am-margin-0 am-text-sm">
		<li><ul class="am-avg-sm-2"><li>本月业绩：${perforMap.monthAmount}元</li><li class="am-text-right am-padding-right-sm"><a href="weixin/employee/performanceDetail?dayType=month&type=base">明细</a></li></ul></li>
		<li><ul class="am-avg-sm-2"><li>本月提成：${perforMap.monthCommisionAmount}元</li><li class="am-text-right am-padding-right-sm"><a href="weixin/employee/performanceDetail?dayType=month&type=commision">明细</a></li></ul></li>
	</ul>
	<a href="weixin/employee/performanceHis" class="am-text-white"><h4 class="app-title">历史业绩<span class="am-fr am-icon-angle-right"></span></h4></a>
	<hr class="am-margin-0">
	<h4 class="app-title">目标管理</h4>
	<ul class="am-avg-sm-1">
		<li class="am-text-right am-text-blue am-padding-sm">本月目标：<span class="am-text-black"><input type="number" id="target" class="am-bordor-0" value="${emp.target}" style="width:80px"> </span>元</li>
		<li class="am-padding-sm">
			<div class="am-progress am-progress-xs am-margin-bottom-0">
			<input id="monthAmount" type="hidden" value="${perforMap.monthAmount}"></input>
				<div class="am-progress-bar" style="width: ${progress}"></div>
			</div>
			<span class="am-text-xs progress-span">已完成 ${progress}</span>
		</li>
	</ul>
	<h4 class="app-title">业绩排行</h4>
	<div class="am-tabs" id="doc-my-tabs" data-am-tabs>
		<ul class="am-tabs-nav inverse am-nav am-nav-tabs am-nav-justify">
			<li class="am-active"><a href="#tab1">${FXS.name}</a></li>
			<li><a href="#tab2">${RTS.name}</a></li>
			<li><a href="#tab3">${XFS.name}</a></li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-padding-0 am-active" id="tab1">
				<ul class="am-avg-sm-2">
					<li class="am-bg-grey am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">今日业绩排行</h4>
						<ul class="app-rank-list">
							<c:forEach items="${FXS.day}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
					<li class="am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">本月业绩排行- ${month}</h4>
						<ul class="app-rank-list">
							<c:forEach items="${FXS.month}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
				</ul>
			</div>
			<div class="am-tab-panel am-padding-0" id="tab2">
				<ul class="am-avg-sm-2">
					<li class="am-bg-grey am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">今日业绩排行</h4>
						<ul class="app-rank-list">
							<c:forEach items="${RTS.day}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
					<li class="am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">本月业绩排行- ${month}</h4>
						<ul class="app-rank-list">
							<c:forEach items="${RTS.month}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
				</ul>
			</div>
			<div class="am-tab-panel am-padding-0" id="tab3">
				<ul class="am-avg-sm-2">
					<li class="am-bg-grey am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">今日业绩排行</h4>
						<ul class="app-rank-list">
							<c:forEach items="${XFS.day}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
					<li class="am-padding-sm">
						<h4 class="am-text-blue am-margin-bottom-xs">本月业绩排行- ${month}</h4>
						<ul class="app-rank-list">
							<c:forEach items="${XFS.month}" var="s" varStatus="status">
								<c:choose>
									<c:when test="${status.count==1}"><li><h1>${status.count}.${s.employeeName}</h1></li></c:when>
									<c:when test="${status.count==2}"><li><h2>${status.count}.${s.employeeName}</h2></li></c:when>
									<c:when test="${status.count==3}"><li><h3>${status.count}.${s.employeeName}</h3></li></c:when>
									<c:otherwise><li>${status.count}.${s.employeeName}</li></c:otherwise>
								</c:choose>
							</c:forEach>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
